<template>
    <div class="borrowbooks">
        <van-nav-bar
            left-text="办理还书"
            left-arrow
            @click-left="onClickLeft"

        />
        <div class="main">
            <div class="main-module1">
                <div class="main-module1-left">
                    <h5>第一步:请扫描会员码</h5>
                    <a href="">带入我的会员码</a>
                        <div v-if="ifshow">
                            <span style="font-size: 12px;font-weight: bolder;">{{ username }}&nbsp;&nbsp;&nbsp;&nbsp;{{ phone }}</span>
                        </div>
                </div>
                <div class="main-module1-right">
                    <!-- <van-icon name="enlarge" /> -->
                    <van-button icon="enlarge" type="success" size="small" @click="onScan">扫描</van-button>
                </div>
            </div>
            <div class="main-module2">
                <div class="main-module2-left">
                    <h5>第二步:请扫描图书编码</h5>
                </div>
                <div class="main-module2-right">
                    <!-- <van-icon name="enlarge" /> -->
                    <van-button icon="enlarge" type="success" size="small" @click="onScan1">扫描</van-button>
                </div>
                <template v-for="item in booksArr">
                    <div v-if="ifshow2" class="bookArrshow">
                        <img :src="item.img" alt="">
                        <div style="flex:1;flex-direction: column;margin-left: 50px;">
                            <h4 style="font-size: 14px;">{{ item.name }}</h4>
                            <p style="font-size:12px">{{ item.title }}</p>
                        </div>
                    </div>
                </template>
            </div>
            <van-button class="submitbutton"  size="small" @click="onClickSubmit(booksArr)" round type="success">确认还书</van-button>
            <p style="font-size: 12px;color: #ccc;">带入我的会员码"该功能用于管理员自己办理图书的借阅和归还时使用,点击此按键可以自动填入管理员自己的会员码。</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import { useRouter } from "vue-router";
import {getScanBookAPI,getScanBook2API} from '@/api/goodsApi'
import { showNotify } from 'vant';

let $router = useRouter()

let username = ref('');
let phone = ref('')
let ifshow = ref<boolean>(false)
let ifshow2 = ref<boolean>(true)
interface IBooks {
  img: '';
  name: '';
  title:''
}
let booksArr:Array<IBooks> = reactive<Array<IBooks>>([])

// 返回
function onClickLeft() {
  $router.back();
}

// 点击扫描时候触发
const onScan = ()=>{
    // console.log(1);
    getScanBookAPI().then((res:any)=>{
        console.log(res);
        if(res.code==200){
            username=res.data.name;
            phone=res.data.phone;
            ifshow.value=true;
        }
    })
}

// 点击第二个扫描
const onScan1 = ()=>{
    getScanBook2API().then((res:any)=>{
        // console.log(res);
        
        if(res.code == 200){  
            console.log(res);
            if(booksArr.length>0){
                console.log('您已经扫过了');
                
            }else{
                booksArr.push(res.data)
            }
            ifshow2.value = true
        }
    })
}

// 确认提交
const onClickSubmit=(booksArr:any)=>{
    console.log(booksArr);
    if(booksArr.length>0 && ifshow.value==true){
        showNotify({ type: 'success', message: '通知内容' });
        
    }else{
        console.log('请先扫码');
    }

}
</script>

<style scoped lang="less">
.van-nav-bar {
  position: sticky;
  top: 0;
}
.borrowbooks{
    width: 100%;
    height: 100px;
}
.main{
    width: 100%;
    height: 400px;
    padding: 10px 10px;
    overflow: hidden;
}
.main-module1{
    padding: 10px 10px;
    border:1px solid #ccc;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    .main-module1-left{
        display: flex;
        flex-direction: column;

    }
    .main-module1-right{
        display: flex;
        flex-direction: column;
        margin-left: 130px;
        margin-top: 5px;
        .van-button{
            width: 70px;
            color:white;
        }
    }
}
.main-module2{
    padding: 10px 10px;
    border:1px solid #ccc;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .main-module2-left{
        display: flex;
        flex-direction: column;
    }
    .main-module2-right{
        display: flex;
        flex-direction: column;
        margin-left: 115px;
        margin-top: 5px;
        .van-button{
            width: 70px;
            color:white;
        }
    }
}
.bookArrshow{
        display: flex;
        flex-direction: row;
       }
a{
    font-size: 12px;
}
.submitbutton{
    width:300px;
    margin:30px 30px;
    font-size:12px;
}

</style>